<template>
  <div class="mima_box">
    <ul class="mima_ul">
      <li class="mima_li">
        <span>手机号码</span>
        <input type="text" v-model="shoujihao" placeholder="请填写手机号码" />
      </li>
      <li class="mima_li mima_li_input mima_li2">
        <span>验证码</span>
        <input type="text" v-model="yanzhengma" placeholder="请填手机验证码" />
        <!-- 验证码 -->
        <!-- <p class="p">
          <span v-if="inentify" @click="send" style="color:#d31d17">获取验证码</span>
          <span v-if="timer">{{count}}s</span>
        </p> -->
         <SendSms :phone="shoujihao" style="color: #d31d17;"/>
      </li>
      <li class="mima_li">
        <span>新密码</span>
        <input type="password" v-model="xinmima" placeholder="请填写新密码" />
      </li>
      <li class="mima_li">
        <span>确认新密码</span>
        <input type="password" v-model="quepassword" placeholder="请确认填写新密码" />
      </li>
    </ul>
    <button class="red_btn" @click="querenxiugai">确认修改</button>
  </div>
</template>

<script>
import SendSms from "../AComp/amendsms";
export default {
   name: "wangjimima",
    components: {
      SendSms
    },
  data() {
    return {
      shoujihao: "", //请填写手机号码
      yanzhengma: "", //请填手机验证码
      xinmima: "", //请填写新密码
      quepassword: "", //请确认填写新密码
      inentify: true, //显示获取验证码
      timer: false, //显示读取秒数 v-show控制显示‘获取按钮’还是‘倒计时’
      count: 60, //倒计时 计数器
      time: ""
    };
  },
  methods: {
    // 发送短信
    async send() {
      // 判断为空
      if (!this.shoujihao) {
        this.$toast("请填写手机号");
        return;
      }
      try {
        // 对接口
        let res = await this.http.post("/api/member/send/sms", {
          mobile: this.shoujihao
        });
        // 正确
        this.$toast("发送成功");
      } catch (error) {
        //否则错误
        this.$toasted.error(error.message, { icon: "error" }).goAway(2000);
      }
      // 计时器
      (this.inentify = !this.inentify),
        (this.timer = true),
        (this.time = setInterval(() => {
          this.count -= 1;
          if (this.count == 0) {
            clearInterval(this.time);
            this.inentify = !this.inentify;
            this.timer = false;
            this.count = 60;
          }
        }, 1000));
    },

    async querenxiugai() {
      // 判断为空
      if (
        !this.shoujihao ||
        !this.yanzhengma ||
        !this.xinmima ||
        !this.quepassword
      ) {
         this.$toast("请输入完善信息");
        return;
      }
       if(!/^[0-9A-Za-z]{6,15}$/.test(this.xinmima)) {
           	this.$toast("密码少于6位");
           	return;
       } 
      if(this.xinmima != this.quepassword) {
					this.$toast("两次密码输入不一致");
					return;
				}
      // 对接口
      try {
        let res = await this.http.post("/api/login/pwd", {
          // 对参数
          mobile: this.shoujihao,
          sms: this.yanzhengma,
          pwd: this.xinmima,
          confirm_pwd: this.quepassword
        });
        //正确
        
        if (res.status_code == 200) {
            this.$toast("修改成功");
            this.$router.back();
        } else {
          // 否则错误
           this.$toast(res.message);
        }
      } catch (error) {
        // 拒绝
        // this.$toasted.error(error.message, { icon: "error" }).goAway(2000);
      }
    }
  }
};
</script>

<style>
@import url("../../assets/css/ttcp/chongzhi.css");
.mima_box {
  background-color: #f2f2f2;
  height: 100vh;
}

.mima_box .mima_ul .mima_li span {
  width: 24%;
}
.mima_box .mima_ul .mima_li2 span:last-child {
  width: 100%;
}
.mima_box .mima_ul .mima_li_input input {
  width: 43%;
}
.mima_li2 p{width: 30%;text-align: right}
.mima_li2 p span{color: #d31d17;}
.mima_box .mima_ul .mima_li{display: flex;justify-content: flex-start;}
</style>